<template>
  <div id="mobileHomeProducts">
    <!-- 头部为你推荐 -->
    <div class="title">
      <div class="title_item_left">
        <img src="@/assets/images/mobile_black/home/collection.png" />
        <span>数字展品</span>
      </div>
      <span class="title_item_right" @click="gotoMail"
        >全部 <img src="@/assets/images/mobile_black/home/arrow_right.png"
      /></span>
    </div>

    <!-- 商品展示区域 -->
    <div class="content">
      <div class="phoneProducts">
        <div
          class="productItem"
          v-for="item in productList"
          :key="item.id"
          @click="buyProduct(item)"
        >
          <div class="productImages">
            <div class="productImage">
              <img :src="show_url + item.images[0]" />
              <img
                class="nullStock"
                v-if="item.goods_stock === 0"
                src="@/assets/images/mobile_black/home/soldout.png"
              />
              <div v-else-if="item.isOverTime" class="overTimeMask">已结束</div>
            </div>

            <div class="sellDay" v-if="item.sale_type === 3">
              时间待定
            </div>
            <div
              class="sellDay"
              v-else-if="item.is_buy === 0 && !item.isOverTime && item.countTimeStatus == 1"
            >
              {{ item.sellTime }}
            </div>
          </div>

          <div class="productDesc">
            <div class="productTitle">
              {{ item.goods_name }}
            </div>

            <div class="productCenter">
              <img :src="show_url + item.icon" />
              <span>{{ item.authorize }}</span>
            </div>
            <div class="buy">
              <button
                v-if="item.goods_stock !== 0 && !item.isOverTime"
                class="buyButton btn_color"
                :disabled="item.goods_stock === 0 || item.isOverTime"
                @click.stop="buyProduct(item)"
              >
                {{ changeBuy(item) }}
              </button>
              <button
                v-else
                class="buyButton btn_grey"
                :disabled="item.goods_stock === 0 || item.isOverTime"
                @click.stop="buyProduct(item)"
              >
                {{ changeBuy(item) }}
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "MobileHomeProducts",
  props: {
    productList: {
      type: Array
    },
    show_url: {
      type: String
    }
  },
  methods: {
    // -----功能性方法-----
    buyProduct(item) {
      this.$emit("buyProduct", item);
    },
    changeBuy(val) {
      // 售罄(没库存)
      if (val.goods_stock <= 0) {
        return "已售罄";
      } else {
        // 有库存
        if (val.isOverTime) {
          return "已结束";
        } else {
          // 正常或者预售(没有超时)
          return "立即查看";
        }
      }
    },

    // -----跳转相关方法-----
    // 点击 MORE+ 跳转到商城界面
    gotoMail() {
      this.$router.push("/mail/productItem");
    }
  }
};
</script>

<style lang="less" scoped>
#mobileHomeProducts {
  // height: 990px;

  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 46px;
    margin: 50px 0 30px 0;

    .title_item_left {
      display: flex;
      align-items: center;

      img {
        width: 46px;
        height: 46px;
      }

      span {
        font-size: 40px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #ffffff;
        margin-left: 20px;
        line-height: 20px;
      }
    }

    .title_item_right {
      display: flex;
      align-items: center;
      font-size: 24px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #808080;
      transform: translateX(8px);

      img {
        width: 36px;
        height: 36px;
        margin: 0;
      }
    }
  }

  .content {
    // margin-bottom: 51px;
    .phoneProducts {
      align-items: center;
      justify-content: space-between;
      display: flex;
      flex-wrap: wrap;
      width: 100%;

      /deep/ .van-pull-refresh {
        width: 100%;
      }

      /deep/.van-list {
        align-items: center;
        justify-content: space-between;
        display: flex;
        flex-wrap: wrap;
        padding: 0 2px;
      }

      .productItem {
        width: 100%;
        margin-right: 0;
        border-radius: 12px;
        background: #2b2c2d;
        box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
        margin-bottom: 47px;

        .productImages {
          position: relative;

          .productImage {
            height: 100%;
            display: flex;
            align-items: center;
            background-color: #000000;
            border-radius: 12px 12px 0px 0px;

            img {
              width: 100%;
              height: auto;
              max-height: 684px;
              border-radius: 12px 12px 0px 0px;
            }

            .nullStock {
              position: absolute;
              left: 0;
              top: 0;
              background: #000000;
              opacity: 0.6;
              height: 684px;
            }
            .overTimeMask {
              display: flex;
              justify-content: center;
              align-items: center;
              position: absolute;
              left: 0;
              // right: 0;
              top: 0;
              // bottom: 0;
              width: 100%;
              height: 100%;
              background: #000000;
              opacity: 0.6;
              font-size: 90px;
              font-weight: 900;
              color: #999999;
              font-family: "Lantinghei SC";
            }
          }

          .cownTime {
            position: absolute;
            top: 10px;
            left: 10px;
            display: flex;
            align-items: center;

            .timeBox {
              width: 33px;
              height: 33px;
              background: #ffffff;
              border-radius: 5px;
              display: block;
              font-size: 20px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #333333;
              text-align: center;
            }

            .colon {
              margin: 0 5px;
            }
          }

          .sellDay {
            background: url("../../assets/images/mobile/sellBtnBg.png");
            background-size: 100% 100%;
            font-size: 40px;
            font-weight: 500;
            color: #000000;
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            bottom: 0;
            left: 0;
            padding: 12px 38px 8px 20px;
            min-width: 340px;
          }
        }

        .productDesc {
          background: url("../../assets/images/mobile_black/home/list_background.png") no-repeat;
          background-position: right center;
          background-size: 60% 100%;
          padding: 0 30px;
          overflow: hidden;

          .productTitle {
            display: flex;
            width: 100%;
            font-size: 40px;
            line-height: 46px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #ffffff;
            display: -webkit-box;
            overflow: hidden;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            text-overflow: ellipsis;
            word-break: break-all;
            margin-top: 34px;
          }

          .productNumber {
            display: none;
          }

          .productLimit {
            display: none;
          }

          .productCenter {
            display: flex;
            align-items: center;
            margin-top: 28px;

            img {
              width: 46px;
              height: 46px;
            }

            span {
              font-size: 28px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #ffffff;
              margin-left: 20px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }

          .buy {
            margin-top: 40px;
            margin-bottom: 50px;

            display: flex;
            align-items: center;
            justify-content: space-between;

            .price {
              font-size: 32px;
              font-family: Microsoft YaHei;
              font-weight: bold;
              color: #e52d27;
            }

            .phoneProductNumber {
              display: block;
              font-size: 28px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #808080;
            }

            /deep/.buyButton {
              position: relative;
              width: 100%;
              height: 72px;
              font-size: 28px;
              font-family: PingFangSC-Semibold, PingFang SC;
              font-weight: 600;
              color: #1e2020;
              line-height: 28px;
              border: none;
              background: none;
              background-size: cover;
              background-position: center center;
            }

            .btn_color {
              background-image: url("../../assets/images/mobile_black/login/btn_color.png");
            }

            .btn_grey {
              background-image: url("../../assets/images/mobile_black/login/btn_grey.png");
            }
          }
        }
      }

      /deep/ .van-list__loading {
        margin: 0 auto;
      }

      /deep/ .van-list__finished-text {
        margin: 0 auto;
        font-size: 32px;
      }

      /deep/ .van-pull-refresh__head {
        top: -30px;
        font-size: 32px;
      }

      /deep/ .van-loading__text {
        font-size: 32px;
      }

      /deep/ .van-list__placeholder {
        display: none;
      }
    }
  }
}
</style>
